<template>
    <page-layout>
        <template v-slot:header>
            <el-button size="mini" type="primary" @click="updateEvt">保存</el-button>
            <el-button size="mini" @click="backEvt">取消</el-button>
        </template>
        <el-form ref="form" :rules="rules"  :model="shopData"  label-width="80px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item  label="商铺编码:">
                        <el-input v-model="shopData.shop_id" size="mini" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item  label="商铺名字:">
                        <el-input v-model="shopData.shop_name" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-form-item  label="店长:">
                        <el-select v-model="shopData.manager" placeholder="请选择" size="mini">
                            <el-option
                            v-for="item in managerAll"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  label="店员:">
                        <el-select v-model="shopData.clark" placeholder="请选择" size="mini">
                            <el-option
                            v-for="item in clarkAll"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item  label="商铺经度:">
                        <el-input v-model="shopData.lng" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item  label="商铺纬度:">
                        <el-input v-model="shopData.lat" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item  label="经营区域:">
                        <el-input v-model="shopData.area" size="mini"></el-input>
                    </el-form-item>
                    <!-- <el-form-item  label="经营区域:">
                        <el-cascader
                        v-model="value"
                        :options="options"
                        @change="handleChange"
                        size="mini"></el-cascader>
                    </el-form-item> -->
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item  label="详细地址:">
                        <el-input v-model="shopData.address" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item  label="备注:">
                        <el-input v-model="shopData.remark" size="mini"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </page-layout>
</template>
<script>
    import {shopListApi,shopUpdateApi} from '@/apis/shopApi'
    import store from '@/store'
    export default{
        data(){
            return{
                shopData:{
                    "shop_id": "",
                    "shop_name": "",
                    "lng": "",
                    "lat": "",
                    "area": "",
                    "address": "",
                    "manager": "",
                    "clark": "",
                    "remark": ""
                },
                managerAll:[],
                clarkAll:[],
                shopList:{},
                shopId:'',
                // value:[],
                // options:[],
                rules:{
                    shop_id:[
                        { required: true, message: '请输入商铺编码'}
                    ]
                }
            }
        },
        methods:{
            backEvt(){
                sessionStorage.removeItem('edit')
                this.$router.go(-1)
            },
            async updateEvt(){
                let updateRes = await shopUpdateApi(this.shopData)
                if(updateRes.code === 200){
                    this.$message.success('产品信息保存成功')
                }
            },
            handleChange(){}
        },
        beforeRouteLeave(to,from,next){
            sessionStorage.removeItem('edit')
            next()
        },
        async mounted(){
            this.$forceUpdate()
            let edit = sessionStorage.getItem('edit')
            this.shopList = store.getters['common/shopList']
            if(!!edit){
                // this.shopId = window.location.search.split('=')[1]
                this.shopId = sessionStorage.getItem('edit')
                // this.shopList = store.getters['common/shopList']
                let shopTarget = this.shopList.find(it =>{
                    return it.shop_id === this.shopId
                })
                this.shopData = shopTarget
            }
            let manager = []
            let clark = []
            this.shopList.forEach(it => {
                manager.push(it.manager)
                clark.push(it.clark)
                manager = manager.filter((item,index)=>{
                    return manager.indexOf(item) == index
                })
                clark = clark.filter((item,index)=>{
                    return clark.indexOf(item) == index
                })
            })
            let managerRes = []
            let clarkRes = []
            for(var i in manager){
                managerRes.push({label:manager[i],value:"value"+i})
            }
            this.managerAll = managerRes
            for(var i in clark){
                clarkRes.push({label:clark[i],value:"value"+i})
            }
            this.clarkAll = clarkRes
        }
    }
</script>